<template>
  <el-dialog title="班级排课" :visible.sync="dialogVisible" width="860px" :close-on-click-modal="false"
    :modal-append-to-body="false" v-drag2anywhere>
    <el-radio-group v-model="formData.type">
      <el-radio-button label="规则排课"></el-radio-button>
      <el-radio-button label="日历排课"></el-radio-button>
    </el-radio-group>

    <div v-if="formData.type=='规则排课'" style="padding: 20px 0px;">
      <el-form :data="formData" size="mini" label-width="80px">
        <el-row :gutter="30">
          <el-col>
            <el-form-item label="开始日期:">
              <el-date-picker v-model="formData.startdate" value-format="yyyy-MM-dd"
                placeholder="开始日期"></el-date-picker>
            </el-form-item>
          </el-col>

          <el-col>
            <el-form-item label="重复方式:">
              <el-radio-group v-model="formData.repeattype">
                <el-radio label="每天重复"></el-radio>
                <el-radio label="每周重复"></el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>



          <!--重复方式 每天重复-->
          <el-col v-if="formData.repeattype=='每天重复'">
            <el-form-item label="上课时间:">
              <el-time-select style="width: 140px;" placeholder="起始时间" v-model="formData.starttime" :picker-options="{
                            start: '00:00',
                            step: '00:10',
                            end: '24:00'
                          }">
              </el-time-select>
              ~
              <el-time-select style="width: 140px;" placeholder="结束时间" v-model="formData.endtime" :picker-options="{
                            start: '00:00',
                            step: '00:10',
                            end: '24:00',
                            minTime: formData.starttime
                          }">
              </el-time-select>
            </el-form-item>
          </el-col>

          <!--重复方式 每周重复-->
          <el-col v-if="formData.repeattype=='每周重复'">
            <el-form-item label="排课安排:">
              <el-table border :data="formData.timetables">
                <el-table-column label="周几" width="340px" align="center">
                  <template v-slot="scope">
                    <el-select v-model="scope.row.days" filterable multiple style="width: 100%;">
                      <el-option label="周一" value="1" v></el-option>
                      <el-option label="周二" value="2" v></el-option>
                      <el-option label="周三" value="3" v></el-option>
                      <el-option label="周四" value="4" v></el-option>
                      <el-option label="周五" value="5" v></el-option>
                      <el-option label="周六" value="6" v></el-option>
                      <el-option label="周日" value="7" v></el-option>
                    </el-select>
                  </template>
                </el-table-column>
                <el-table-column label="上课时间" width="300px" align="center">
                  <template v-slot="scope">
                    <div style="display: flex;">
                      <el-time-select style="width: 130px;" placeholder="起始时间" v-model="scope.row.starttime"
                        :picker-options="{
                            start: '00:00',
                            step: '00:10',
                            end: '23:30'
                          }">
                      </el-time-select>
                      <span style="padding: 0px 5px;"> ~ </span>
                      <el-time-select style="width: 130px;" placeholder="结束时间" v-model="scope.row.endtime"
                        :picker-options="{
                            start: '00:00',
                            step: '00:10',
                            end: '23:30',
                            minTime: scope.row.starttime
                          }">
                      </el-time-select>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column label="操作">
                  <template v-slot="scope">
                    <el-button-group>
                      <el-button type="danger" icon="el-icon-delete" circle size="mini"></el-button>
                      <el-button v-if="scope.$index==formData.timetables.length-1" type="primary" circle
                        icon="el-icon-plus" @click="handleAddTime(scope.$index,scope.row)"></el-button>
                    </el-button-group>
                  </template>
                </el-table-column>
              </el-table>
              <div
                style="line-height: 35px; padding:0px 10px; color: #bcbcbc; border: 1px solid #EAEAEA; border-top: none;">
                请根据课程安排，添加相应的排课时间段
              </div>
            </el-form-item>
          </el-col>


          <el-col>
            <el-form-item label="结束方式:">
              <div style="display: flex;">
                <div style="margin-right: 10px;">
                  <el-select v-model="formData.endtype" style="width: 120px;">
                    <el-option label="按日期" value="按日期"></el-option>
                    <el-option label="按次数" value="按次数"></el-option>
                  </el-select>
                </div>
                <div>
                  <el-date-picker v-if="formData.endtype=='按日期'" type="date" style="width: 170px;"
                    v-model="formData.enddate" value-format="yyyy-MM-dd" placeholder="结束日期"></el-date-picker>
                  <el-input-number v-if="formData.endtype=='按次数'" v-model="formData.endtimes"
                    placeholder="结束日期"></el-input-number>
                  <span v-if="formData.endtype=='按次数'">最后一次课结束日期:</span>
                </div>
              </div>
            </el-form-item>
          </el-col>


          <el-col>
            <el-form-item label="授课教师:">
              <el-select v-model="formData.teachers" filterable multiple placeholder="请选择" style="width: 300px;">
                <el-option v-for="item in teachers" :key="item.tid" :label="item.name" :value="item.tid">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col>
            <el-form-item label="上课教室:">
              <el-select v-model="formData.room" placeholder="请选择教室">
                <el-option v-for="item in roomlist" :label="item.name" :key="item.roomid"
                  :value="item.roomid"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <div v-if="formData.type=='日历排课'" style="padding: 20px 0px;">
      <el-form :data="formData" size="mini" label-width="80px">
        <el-row :gutter="30">
          <el-col>
            <el-form-item label="上课日期">
              <el-date-picker type="dates" style="width:600px" v-model="formData.dates"
                placeholder="请选择计划上课的日期"></el-date-picker>
              <span style="padding: 5px 10px">已选 <span
                  style="font-weight: bold;color:#FF0000">{{formData.dates.length}}</span> 天</span>
            </el-form-item>
          </el-col>

          <el-col>
            <el-form-item label="上课时间:">
              <el-time-select style="width: 140px;" placeholder="起始时间" v-model="formData.starttime" :picker-options="{
                            start: '00:00',
                            step: '00:10',
                            end: '24:00'
                          }">
              </el-time-select>
              ~
              <el-time-select style="width: 140px;" placeholder="结束时间" v-model="formData.endtime" :picker-options="{
                            start: '00:00',
                            step: '00:10',
                            end: '24:00',
                            minTime: formData.starttime
                          }">
              </el-time-select>
            </el-form-item>
          </el-col>

          <el-col>
            <el-form-item label="授课教师:">
              <el-select v-model="formData.teachers" filterable multiple placeholder="请选择" style="width: 300px;">
                <el-option v-for="item in teachers" :key="item.tid" :label="item.name" :value="item.tid">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col>
            <el-form-item label="上课教室:">
              <el-select v-model="formData.room" placeholder="请选择教室">
                <el-option v-for="item in roomlist" :label="item.name" :key="item.roomid"
                  :value="item.roomid"></el-option>
              </el-select>
            </el-form-item>
          </el-col>

        </el-row>
      </el-form>
    </div>

    <div slot="footer" style="text-align: center;">
      <el-button>取消</el-button>
      <el-button type="primary">保存</el-button>
    </div>
  </el-dialog>
</template>

<script>
  export default {
    data() {
      return {
        formData: {
          type: "规则排课",
          endtype: '按日期',
          endtimes: 1,
          enddate: '',
          repeattype: '每天重复',
          repeatdays: ["周六", "周日"],
          starttime: '',
          endtime: '',
          timetables: [{
            days: ["1", "2"],
            starttime: '00:00',
            endtime: "12:00"
          }],
          teachers: [],
          dates: [],
        },
        teachers: [],
        roomlist: [],
        dialogVisible: false
      }
    },
    methods: {
      handleAddTime(index, data) {
        this.formData.timetables.push({
          days: [],
          starttime: '',
          endtime: ''
        })
      },
      init() {
        this.loadTeachers();
        this.loadClassrooms();
      },
      loadTeachers() {
        this.api_helper.post("api/admin/educational/teacher/list_option").then(res => {
          if (res.status == 200 && res.data.code == 1) {
            this.teachers = res.data.list;
          }
        })
      },
      loadClassrooms() {
        this.api_helper.post("api/admin/educational/classroom/list_option").then(res => {
          if (res.status == 200 && res.data.code == 1) {
            this.roomlist = res.data.list;
          }
        })
      }
    }
  }
</script>

<style>
</style>
